<template>
	<view>
		<!-- <view class="active flex-space-between" v-if="seckillProduct.length > 0 || assembleProduct.length > 0 ||
                bargainProduct.length > 0" :style="'margin-top:'+itemData.style.paddingTop+'px;'"> -->
		<view class="active flex-space-between" v-if="seckillProduct.length > 0 || assembleProduct.length > 0" :style="'margin-top:'+itemData.style.paddingTop+'px;'">
			<view class="active-item bg-fff" @click="jump('/pages/active/seckill/seckill')"
				v-if="seckillProduct.length > 0">
				<view class="active-item-top">
					<view class="active-item-title">秒杀专区</view>
					<view class="active-item-line">{{seckillTop.seckill_title?seckillTop.seckill_title:'今日热抢'}}</view>
					<image :src="seckillTop.seckill_title_img" class="active-item-img" v-if="seckillTop.seckill_title_img"></image>
				</view>
				<view class="active-item-mind">{{seckillTop.seckill_exp?seckillTop.seckill_exp:'超值优惠 限时抢购'}}</view>
				<view class="active-item-product flex-align-center">
					<view class="flex-column-center active-item-seckill" v-for="(item,index) in seckillProduct" :key="index"
						v-if="index < 2">
						<image class="active-item-product-image" :src="item.product.file_path" mode="widthFix"></image>
						<view class="active-item-product-price flex-center"
							:style="{background: 'url('+$setting.imageUrl()+'seckill_price_bg.png) no-repeat', backgroundSize: '136rpx 48rpx'}">
							￥{{item.seckill_price}}</view>
					</view>
					<view v-if="seckillProduct.length == 1"></view>
				</view>
			</view>
			<!-- <view class="active-item bg-fff" @click="jump('/pages/active/assemble/assemble')"
				v-if="assembleProduct.length > 0">
				<view class="active-item-top">
					<view class="active-item-title">拼团专区</view>
					<view class="active-item-line">{{assembleTop.assemble_title?assembleTop.assemble_title:'团购大放价'}}</view>
				</view>
				<view class="active-item-mind">{{assembleTop.assemble_exp?assembleTop.assemble_exp:'参与拼团 享受更低折扣'}}</view>
				<view class="active-item-product flex-align-center">
					<view class="flex-column-center active-item-assemb" v-for="(item,index) in assembleProduct" :key="index"
						v-if="index < 2">
						<image class="active-item-product-image" :src="item.product.file_path"></image>
						<view class="active-item-product-name u-line-1">
							<view class="sellMoney">{{item.assemble_price.split('.')[0]+'.'}}</view>
							<view class="sellMoney_small">{{item.assemble_price.split('.')[1]}}</view>
							<view class="sellMoney_txt">成团价</view>
						</view>
					</view>
					<view v-if="assembleProduct.length == 1"></view>
				</view>
			</view> -->
			<view
                class="active-item bg-fff"
                @click="jump('/pages/active/chop/chop')"
                v-if="bargainProduct.length > 0"
            >
				<view class="active-item-top">
					<view class="active-item-title">助力专区</view>
					<view v-if="bargainTop.bargain_title" class="active-item-line">{{bargainTop.bargain_title}}</view>
					<image :src="bargainTop.bargain_title_img" class="active-item-img" v-if="bargainTop.bargain_title_img"></image>
				</view>
				<view v-if="bargainTop.bargain_exp" class="active-item-mind">{{ bargainTop.bargain_exp }}</view>
                <view class="active-item-product flex-align-center">
                    <view class="flex-column-center active-item-assemb" v-for="(item,index) in bargainProduct" :key="index"
						v-if="index < 2">
						<image class="active-item-product-image" :src="item.product.file_path"></image>
						<view class="seckill-activity">
							<text class="seckill-activity-ele">最低</text>
							<text class="sellMoney_small">
								{{
									item.bargain_price
										? item.bargain_price.split('.')[0] + '.'
										: '0.'
								}}{{
									item.bargain_price
										? item.bargain_price.split('.')[1]
										: '00'
								}}
							</text>
						</view>
					</view>
                    <view v-if="bargainProduct.length == 1"></view>
                </view>
            </view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: ["seckillProduct", "assembleProduct", "seckillTop", "assembleTop", 'bargainProduct','itemData', 'bargainTop'],
		created() {
			// console.log(this.seckillTop,"=+++++++++++++++++++++++++++++++")
			// console.log(this.assembleTop,"=+++++++++++++++++++++++++++++++")
		},
		methods:{
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>
<style scoped lang="scss">
.flex-space-between {
    flex-wrap: wrap;
}
.active-item {
    margin-bottom: 20rpx;
}
.line-through{
	text-decoration: line-through;
}
</style>
<style lang="scss">
	@font-face {
		font-family: "YouSheBiao";
		src:url('https://jiumiaoda.oss-cn-guangzhou.aliyuncs.com/wechat/font/YouSheBiaoTiHei-2.ttf')
	}
	.active {
		margin-top: 20rpx;

		.active-item {
			border-radius: 16rpx;
			width: 332rpx;
			height: 254rpx;
			
			.active-item-top{
				display: flex;
				flex-direction: row;
				// align-items: center;
				align-items: flex-start;
				.active-item-title {
					padding: 12rpx 12rpx 12rpx 20rpx;
					font-size: 28rpx;
					color: #111111;
					font-weight: bold;
				}
				
				.active-item-line{
					margin-top: 15rpx;
					font-family: 'YouSheBiao';
					font-size: 20rpx;
					color: #ffffff;
					background-color: #d53124;
					padding:5rpx 15rpx;
					border-radius: 10rpx;
				}
				
				.active-item-img{
					margin-top: 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-left: 10rpx;
				}
			}
			.active-item-mind{
				font-size: 20rpx;
				color: #d53124;
				padding: 0 0 0 20rpx;
			}

        .active-item-product {
            padding: 0 0 22rpx 0;

				.active-item-seckill {
					// flex: 1;
					width: 49%;
					padding:5rpx 20rpx 20rpx 20rpx;
					position: relative;
					margin-bottom: 20rpx;
					.active-item-product-image {
						// width: 108rpx;
						// height: 108rpx;
						width: 100%;
					}
				}

				

				.active-item-product-price {
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 1;
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #ffffff;
					width: 136rpx;
					height: 48rpx;
					padding-left: 25rpx;
				}

				.active-item-assemb {
					// flex: 1;
					width: 49%;
					
					.active-item-product-image {
						width: 108rpx;
						height: 108rpx;
						// width: 100%;
					}
					
					.active-item-product-name {
						margin-top: 15rpx;
						color: #b12529;
						font-size: 24rpx;
						font-family: Arial, Helvetica, sans-serif;
						font-weight: 500;
						display: flex;
						flex-direction: row;
						justify-content: center;
						width: 100%;
						&::before{
							content: "￥";
							font-size: 18rpx;
						}
					}
				}

				.active-item-product-name {
					font-size: 24rpx;
					color: #9E9E9E;
					width: 120rpx;
				}
			}
		}
	}
.sellMoney {
	padding-top: 5rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #b12529;
	line-height: 22rpx;
}
.sellMoney_small {
	padding-top: 8rpx;
	font-size: 20rpx;
	font-weight: bold;
	color: #b12529;
	line-height: 22rpx;
}
.sellMoney_txt {
	margin-left: 10rpx;
	padding-top: 8rpx;
	font-size: 20rpx;
	color: #6b6b6b;
	line-height: 22rpx;
}
.seckill-activity {
	font-size: 20rpx;
	padding: 0 4rpx;
	margin: 10rpx 0;
	color: #bb0024;
	display: flex;
	align-items: center;
	border-radius: 8rpx;
	border: 1px solid #bb0024;
	display: inline-block;
	width: fit-content;
	
}
.seckill-activity-ele {
	display: inline-block;
	padding: 0 4rpx;
	background-image: linear-gradient(to right, #bb0024, #fa0032);
	color: #fff;
	margin:0 10rpx 0 -4rpx;
	border-radius: 8rpx 0 8rpx 8rpx;
}
</style>
